<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 重置样式 -->
    <link href="../../asserts/css/reset.css" rel="stylesheet">
    <!-- 字体库 -->
    <link href="../../asserts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 引入首页css -->
    <link href="./index.css" rel="stylesheet">
    <style>
        .cecommending_dishes {
            width: calc(100% - 20px);
            min-height: 20vh;
            margin: 0 auto;
            background-color: #F9F8F8;
            border-radius: 3px;
        }

        .cecommending_dishes .introduce {
            margin: 10px 0 30px 30px;
        }

        .cecommending_dishes .introduce .subject {
            font-size: 1.8em;
            font-weight: 600;
            margin: 10px 0 5px 0;
            color: black;
        }

        .cecommending_dishes .introduce .buy {
            margin: 20px 0;
        }

        .cecommending_dishes .introduce .buy a {
            text-decoration: none;
            color: #B3916C;
            font-weight: 600;
        }

        .cecommending_dishes .pic {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="container_home">

        <div class="cecommending_dishes">

            <div class="introduce float_left">
                <div class="subject">品质套餐</div>
                <div class="subhead">搭配齐全吃的好</div>
                <div class="buy">
                    <a href="https://m.taobao.com">立即抢购 ></a>
                </div>
            </div>

            <div class="pic float_right">
                <img src="../../asserts/images/推荐菜品.png" alt="">
            </div>


            <!-- 用于清除由于浮动引起的父元素高度塌陷 -->
            <div class="clear"></div>
        </div>


    </div>


</body>

</html>